<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 6 Interactivity</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }

        #help{
            position: absolute;
            z-index: 20;
            color: black;
            top: 20px;
            left: 120px;
        }
    </style>

    <script src="../../bin/pixi.dev.js"></script>
</head>
<body>
    <script>
    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x000000);

    // make it interactive
    stage.interactive = true;

    // create a renderer instance.
    var renderer = PIXI.autoDetectRenderer(620, 400);

    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);

    requestAnimFrame(animate);

    // create a background..
    var background = PIXI.Sprite.fromImage("button_test_BG.jpg");

    // add background to stage...
    stage.addChild(background);

    // create some textures from an image path
    var textureButton = PIXI.Texture.fromImage("button.png");
    var textureButtonDown = PIXI.Texture.fromImage("buttonDown.png");
    var textureButtonOver = PIXI.Texture.fromImage("buttonOver.png");

    var buttons = [];

    var buttonPositions = [175,75,
                           600-145, 75,
                           600/2 - 20, 400/2 + 10,
                           175, 400-75,
                           600-115, 400-95];


    for (var i=0; i < 5; i++)
    {
        var button = new PIXI.Sprite(textureButton);
        button.buttonMode = true;

        button.anchor.x = 0.5;
        button.anchor.y = 0.5;

        button.position.x = buttonPositions[i*2];
        button.position.y = buttonPositions[i*2 + 1];

        // make the button interactive..
        button.interactive = true;

        // set the mousedown and touchstart callback..
        button.mousedown = button.touchstart = function(data) {
            this.isdown = true;
            this.setTexture(textureButtonDown);
            this.alpha = 1;
        };

        // set the mouseup and touchend callback..
        button.mouseup = button.touchend = button.mouseupoutside = button.touchendoutside = function(data) {
            this.isdown = false;

            if (this.isOver)
            {
                this.setTexture(textureButtonOver);
            }
            else
            {
                this.setTexture(textureButton);
            }
        };

        // set the mouseover callback..
        button.mouseover = function(data) {
            this.isOver = true;

            if (this.isdown)
                return;

            this.setTexture(textureButtonOver);
        };

        // set the mouseout callback..
        button.mouseout = function(data) {
            this.isOver = false;
            
            if (this.isdown)
                return;

            this.setTexture(textureButton)
        };

        button.click = function(data) {
            console.log("CLICK!");
        };

        button.tap = function(data) {
            console.log("TAP!!");
        };

        // add it to the stage
        stage.addChild(button);

        // add button to array
        buttons.push(button);
    };

    // set some silly values...
    buttons[0].scale.x = 1.2;
    buttons[1].scale.y = 1.2;
    buttons[2].rotation = Math.PI / 10;
    buttons[3].scale.x = 0.8;
    buttons[3].scale.y = 0.8;
    buttons[4].scale.x = 0.8;
    buttons[4].scale.y = 1.2;
    buttons[4].rotation = Math.PI;

    function animate() {
        // render the stage
        renderer.render(stage);

        requestAnimFrame(animate);        
    }

    // add a logo!
    var pixiLogo = PIXI.Sprite.fromImage("pixi.png");
    stage.addChild(pixiLogo);

    pixiLogo.buttonMode = true;

    pixiLogo.position.x = 620 - 56;
    pixiLogo.position.y = 400 - 32;

    pixiLogo.click = pixiLogo.tap = function() {
        window.open("http://www.pixijs.com", '_blank');
    };
    </script>

    </body>
</html>
